<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_绘制多个图表</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.js"></script>
  <style>
    *{
      margin:0px 0px;
    }
    div{
      border:1px solid;
    }
  </style>
</head>
<body >
  <div id="box1" style="width:800px ;height: 500px" ></div>
  <div id="box2" style="width:800px ;height: 500px" ></div>
</body>
<script>
  let dom1=document.querySelector('#box1')
  let dom2=document.getElementById('box2')
  const myechart1=echarts.init(dom1);
  const myechart2=echarts.init(dom2);
  option1={
    title:{
      text:'box1',
      left:'left',
      subtext:'box1-subtext',
      color:'#29d',
      subtextStyle:{
        align:'center'
      }
    },
    xAxis:{
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis:{
      show:true,
      axisLine:{
        show:true,
      },
      axisTick:{
        show:true,
      }
    },
    tooltip:{},
    legend:{
      data:['服饰']
    },
    series:[{
      name:'服饰',
      type:'bar',
      color:'#29d',
      label: {
        show:true,
        position:"top",
      },
      data: [5, 20, 36, 10, 10, 20],
    }]
  },
    option2={
    title:{
      text:'box1',
      left:'left',
      subtext:'box1-subtext',
      color:'#29d',
      subtextStyle:{
        align:'center'
      }
    },
    xAxis:{
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis:{
      show:true,
      axisLine:{
        show:true,
      },
      axisTick:{
        show:true,
      }
    },
    tooltip:{},
    legend:{
      data:['服饰']
    },
    series:[{
      name:'服饰',
      type:'line',
      color:'#29d',
      label: {
        show:true,
      },
      data: [5, 20, 36, 10, 10, 20],
    }]
  },
  myechart1.setOption(option1)
  myechart2.setOption(option2)
</script>
</html>
